<template>
    <div>
        <el-form :model="form" label-width="130px" :rules="rules" ref="form" class="pad-t-1">
            <el-form-item label="基本信息" class="one-label">
                <el-form-item label="排序：" label-width="170px" prop="sortNo">
                    <el-input v-model="form.sortNo" class="long-input"/>
                    <div class="tips">数字越大，排序越靠前，如果为空，默认排序方式为创建时间</div>
                </el-form-item>
                <el-form-item label="套餐名称：" label-width="170px" prop="title">
                    <div class="flex long-input">
                        <el-input v-model="form.title" class="long-input-2" placeholder="请输入套餐名称" maxlength="100" show-word-limit style="width: 79%"/>
                        <el-input v-model="form.unit" class="short-input" placeholder="单位，如：个/件/包" style="margin-left:10px"/>
                    </div>
                </el-form-item>
                <el-form-item label="套餐货号：" label-width="170px" prop="goodsCode">
                    <div class="flex long-input">
                        <el-input v-model="form.goodsCode" class="long-input-2" placeholder="请输入套餐货号" maxlength="100" show-word-limit />
                    </div>
                </el-form-item>
                <el-form-item v-if="form.skuFlag =='0'" label="套餐条形码：" label-width="170px" prop="goodsBarCode">
                    <div class="flex long-input">
                        <el-input v-model="form.goodsBarCode" class="long-input-2" placeholder="请输入套餐条形码" maxlength="100" show-word-limit />
                    </div>
                </el-form-item>
                <el-form-item v-if="form.skuFlag =='0'" label="外部编码：" label-width="170px" prop="externalCode">
                    <div class="flex long-input">
                        <el-input v-model="form.externalCode" class="long-input-2" placeholder="请输入外部编码" maxlength="100" show-word-limit />
                    </div>
                </el-form-item>
                <el-form-item label="海报商品名称：" label-width="170px" prop="posterTitle" v-show="fromListPage == 30">
                    <div class="flex long-input">
                        <el-input v-model="form.posterTitle" class="long-input-2" placeholder="" maxlength="100" show-word-limit />
                    </div>
                </el-form-item>
                <el-form-item label="海报商品推荐语：" label-width="170px" prop="posterRecommend" v-show="fromListPage == 30">
                    <div class="flex long-input">
                        <el-input v-model="form.posterRecommend" class="long-input-2" placeholder="" maxlength="20" show-word-limit />
                    </div>
                </el-form-item>
                <el-form-item label="商品卖点：" label-width="170px" prop="sellPoint">
                    <div class="flex long-input">
                        <el-input v-model="form.sellPoint" type="textarea" :rows="3" class="long-input-2" placeholder="" maxlength="50" show-word-limit/>
                    </div>
                    <div>
                      <span style="font-size: 14px; color: #7f7f7f">用于在云店商品详情中显示的卖点介绍，字数不超过50字</span>
                    </div>
                </el-form-item>
                <el-form-item label="分享文案：" label-width="170px" prop="shareCopy">
                    <div class="flex long-input">
                        <el-input v-model="form.shareCopy" type="textarea" :rows="3" class="long-input-2" placeholder="" maxlength="150" show-word-limit/>
                    </div>
                </el-form-item>
                <el-form-item label="商品图片：" label-width="170px">
                    <div><span class="font-red">* </span>商品主图</div>
                    <div class="flex pro-p-minheight">
                        <draggable id="content-box flex-item" v-model="form.goodsImages" dragable="true" :move="getdata" @update="datadragEnd">
                        <template v-for="(item, key) in form.goodsImages" >
                            <div class="pic-bar mar-r-30 flex-item"
                              :key="key" @mouseover.stop="itemOver(key)" @mouseout.stop="itemOut(-1)">
                                <div @click="deleteImgages(item,key)">
                                    <svg-icon icon-class="close"
                                      :class="{'active':key==curIndex || key==curHover}"
                                      class="close-icon font-16 noraml-hide" />
                                </div>
                                <img class="picture" :src="item.imageUrl+ '?imageView2/1/w/200/h/200/q/100'"/>
                            </div>
                        </template>
                        </draggable>
                        <el-upload v-if="form.goodsImages.length<5"
                                   list-type="picture-card"
                                   action="/api/common/uploadFiles"
                                   accept="image/jpeg,image/gif,image/png,image/bmp"
                                   name="files" multiple
                                   :data="token"
                                   :show-file-list="false"
                                   v-loading="fileLoading"
                                   :limit='5'
                                   :on-exceed="handleExceed"
                                   :on-success="handleUploadSuccess"
                                   :before-upload="beforeUpload">
                          <i class="el-icon-plus"></i>
                        </el-upload>
                    </div>
                    <div class="tips mar-t-3">建议尺寸：750*750像素，可以拖拽图片调整顺序，最多上传5张（若导入商品图片数量超过5张则在小程序内只显示前5张图片）</div>
                </el-form-item>

                <el-form-item label="单列大图：" label-width="170px">
                  <div class="flex height-148 upload-remove-bar">
                    <el-upload list-type="picture-card"
                               action="/api/common/uploadFiles"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               name="files" multiple
                               :data="token"
                               :show-file-list="false"
                               v-loading="picFileLoading"
                               :on-success="handleUploadPicUrlSuccess"
                               :before-upload="beforePicUrlUpload">

                      <img v-if="form.picUrl" :src="form.picUrl+ '?imageView2/1/w/200/h/200/q/100'" style="width: 150px;height: 150px">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="close-icon width-36 height-36 flex flex-center cursor-p" @click="closeEls('picUrl')">
                      <svg-icon v-if="form.picUrl" icon-class="close" class="icon font-16 noraml-hide active" />
                    </div>
                  </div>
                  <div class="tips mar-t-3">建议尺寸：750*410像素，最多上传1张（用于店铺装修单列大图的商品组）</div>
                </el-form-item>

                <el-form-item label="分享图片：" label-width="170px">
                  <div class="flex height-148 upload-remove-bar">
                    <el-upload list-type="picture-card"
                               action="/api/common/uploadFiles"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               name="files" multiple
                               :data="token"
                               :show-file-list="false"
                               v-loading="shareFileLoading"
                               :on-success="handleUploadShareImageUrlSuccess"
                               :before-upload="beforeShareImageUrlUpload">

                      <img v-if="form.shareImageUrl" :src="form.shareImageUrl+ '?imageView2/1/w/200/h/200/q/100'" style="width: 150px;height: 150px">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="close-icon width-36 height-36 flex flex-center cursor-p" @click="closeEls('shareImageUrl')">
                      <svg-icon v-if="form.shareImageUrl" icon-class="close" class="icon font-16 noraml-hide active" />
                    </div>
                  </div>
                  <div class="tips mar-t-3">建议尺寸：750*750像素</div>
                </el-form-item>

                <el-form-item label="商品海报：" label-width="170px">
                  <div class="flex height-148">
                    <el-upload list-type="picture-card"
                               action="/api/common/uploadFiles"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               name="files"
                               :data="token"
                               :show-file-list="false"
                               :limit="1"
                               v-loading="posterFileLoading"
                               :on-success="handleUploadPosterImageUrlSuccess"
                               :before-upload="beforePosterImageUrlUpload">

                      <img v-if="form.posterImageUrl" :src="form.posterImageUrl+ '?imageView2/1/w/200/h/200/q/100'" style="width: 150px;height: 150px">

                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="close-icon width-36 height-36 flex flex-center cursor-p" @click="closeEls('posterImageUrl')">
                      <svg-icon v-if="form.posterImageUrl" icon-class="close" class="icon font-16 noraml-hide active" />
                    </div>
                  </div>
                  <div class="tips mar-t-3">建议尺寸：750*1067像素&nbsp;&nbsp;
                    <el-popover placement="top" width="600" trigger="click">
                      <div>
                        <img :src="require('@/assets/images/goods_share_poster.png')" alt="" style="width:100%">
                      </div>
                      <el-button slot="reference" type="text">效果演示</el-button>
                    </el-popover>
                  </div>
                </el-form-item>

                <el-form-item label="私域平台" v-if="(enterpriseConfig.anchorSelectionAuthority == 1 || enterpriseConfig.platformAuthority == 1) && fromListPage == 30">
                  <div v-if="enterpriseConfig.anchorSelectionAuthority == 1">
                    <el-checkbox v-model="checkedStoreApp" @change="changeAuthority()">云店小程序</el-checkbox>
                    <span style="margin-left: 5px">(勾选并保存在云店小程序中显示销售)</span>
                  </div>
                  <div v-if="enterpriseConfig.anchorSelectionAuthority == 1">
                    <el-checkbox v-model="checkSelectionGoods" @change="changeAuthority()">选品小程序</el-checkbox>
                    <span style="margin-left: 5px">(勾选并保存在选品小程序中显示销售)</span>
                  </div>
                  <div v-if="enterpriseConfig.anchorSelectionAuthority == 1">
                    <el-checkbox v-model="checkShopApp" @change="changeAuthority()">小程序直播</el-checkbox>
                    <span style="margin-left: 5px">(勾选并保存上架后需前往直播商品库提交微信审核)</span>
                  </div>
                </el-form-item>

                <el-form-item label="公域平台" v-if="(enterpriseConfig.anchorSelectionAuthority == 1 || enterpriseConfig.platformAuthority == 1) && fromListPage == 30">
                  <div>
                    <el-checkbox v-model="checkedTikTok" @change="changeAuthority()">抖音小店</el-checkbox>
                    <el-input v-if="enterpriseConfig.anchorSelectionAuthority == 1" type="text" size="mini" style="width: 300px;margin-left: 20px" v-model="form.tiktokGoodsUrl" placeholder="该商品上架到抖店的商品链接"></el-input>
                  </div>
                  <div>
                    <el-checkbox v-model="checkedQuick" @change="changeAuthority()">快手小店</el-checkbox>
                    <el-input v-if="enterpriseConfig.anchorSelectionAuthority == 1" type="text" size="mini" style="width: 300px;margin-left: 20px" v-model="form.quickGoodsUrl" placeholder="该商品上架到快手的商品链接"></el-input>
                  </div>
                  <div>
                    <el-checkbox v-model="checkedTaobao" @change="changeAuthority()">淘宝直播</el-checkbox>
                    <el-input v-if="enterpriseConfig.anchorSelectionAuthority == 1" type="text" size="mini" style="width: 300px;margin-left: 20px" v-model="form.taobaoGoodsUrl" placeholder="该商品上架到淘宝的商品链接"></el-input>
                  </div>
                  <div v-show="false">
                    <el-checkbox v-model="checkedPinDuoDuo" @change="changeAuthority()">拼多多</el-checkbox>
                    <el-input v-if="enterpriseConfig.anchorSelectionAuthority == 1" type="text" size="mini" style="width: 300px;margin-left: 36px" v-model="form.pinDuoDuoGoodsUrl" placeholder="该商品上架到拼多多的商品链接"></el-input>
                  </div>
                </el-form-item>

                <el-form-item label="商品品牌：" label-width="170px">
                  <el-select v-model="form.brandId" placeholder="请选择">
                    <el-option
                      v-for="item in listBrands"
                      :key="item.brandId"
                      :label="item.brandName"
                      :value="item.brandId">
                    </el-option>
                  </el-select>
                </el-form-item>
                
                <div>
                  <!-- 校验系统参数category_separate是否进行类目分类 -->
                  <!-- 直接定义两组类目数组提供使用 -->
                <div v-if="!enterpriseConfig.categorySeparate">
                  <el-form-item label="商品分类：" label-width="170px" prop="goodscategoryIds">
                    <el-cascader v-model="form.goodscategoryIds" @change="categoryChange"
                            placeholder="选择商品分类"
                            :options="categoryData"
                            class="default-input" :props="{ checkStrictly: true }" change-on-select
                            filterable></el-cascader>
                    <div class="tips mar-t-3">请选择商品分类 <a class="font-blue" href="javascript:void(0)" @click="dialogCategoryTreeVisible=true">设置分类</a> | <a class="font-blue" href="javascript:void(0)" @click="refreshCategory">刷新</a></div>
                  </el-form-item>
                </div>
                <div v-else>
                  <!-- 判断是零售还是批发商品 -->
                  <div v-if="this.fromListPage === 30">
                    <el-form-item label="零售商品分类：" label-width="170px" prop="goodscategoryIds">
                      <el-cascader v-model="form.goodscategoryIds" @change="categoryChange"
                            placeholder="选择商品分类"
                            :options="categoryData"
                            class="default-input" :props="{ checkStrictly: true }" change-on-select
                            filterable></el-cascader>
                      <div v-if="showEditButton" class="tips mar-t-3">请选择商品分类 <a class="font-blue" href="javascript:void(0)" @click="dialogCategoryTreeVisible=true">设置分类</a> | <a class="font-blue" href="javascript:void(0)" @click="refreshCategory">刷新</a></div>
                    </el-form-item>
                  </div>
                  <div v-else>
                    <!-- 如果是批发商品 goodsType = 31 判断是否使用别名-->
                    <div v-if="!enterpriseConfig.wholesaleCategoryAlias">
                      <el-form-item label="批发商品分类：" label-width="170px" prop="wholesaleGoodscategoryIds">
                        <el-cascader v-model="form.wholesaleGoodscategoryIds" @change="categoryChange"
                            placeholder="选择商品分类"
                            :options="categoryData"
                            class="default-input" :props="{ checkStrictly: true }" change-on-select
                            filterable></el-cascader>
                      <div v-if="showEditButton" class="tips mar-t-3">请选择商品分类 <a class="font-blue" href="javascript:void(0)" @click="dialogCategoryTreeVisible=true">设置分类</a> | <a class="font-blue" href="javascript:void(0)" @click="refreshCategory">刷新</a></div>
                    </el-form-item>
                    </div>
                    <div v-else>
                    <!-- 使用别名 -->
                      <el-form-item label="批发商品分类：" label-width="170px" prop="wholesaleGoodscategoryIds">
                        <el-cascader v-model="form.wholesaleGoodscategoryIds" @change="categoryChange"
                            placeholder="选择商品分类"
                            :options="wholesaleCategoryData"
                            class="default-input" :props="{ checkStrictly: true }" change-on-select
                            filterable></el-cascader>
                      <div class="tips mar-t-3">请选择商品分类 <a class="font-blue" href="javascript:void(0)" @click="dialogCategoryTreeVisible=true">设置分类</a> | <a class="font-blue" href="javascript:void(0)" @click="refreshCategory">刷新</a></div>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                </div>

              <!-- 快手分类设置 -->
              <el-form-item label="快手分类：" label-width="170px" prop="kuaiShouCategoryCopyIds">
                <el-cascader v-model="form.kuaiShouCategoryCopyIds" :props="{ checkStrictly: true }" placeholder="选择快手分类" :options="kuaiShouCategoryData" @change="categoryChange" :show-all-levels="false" class="special-input" clearable></el-cascader> 
              </el-form-item>

            </el-form-item>
        </el-form>

      <div>
        <el-dialog width="75%" v-el-drag-dialog title="设置分类" :visible.sync="dialogCategoryTreeVisible">
          <div class="el-dialog-div">
            <goods-category />
          </div>

          <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="next-step-btn" @click="refreshCategory">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
</template>


<script>
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import { listGoodsCategory, listWholesaleGoodsCategory } from '@/api/goods/goods'
  import { listBrand } from '@/api/user/enterpriseBrand'
  import { getDictCommon } from '@/api/common/common.js'
  import { getToken } from '@/utils/auth'
  import draggable from 'vuedraggable'
  import GoodsCategory from '../../../goods-category'
  import { getByEnterpriseId } from '@/api/user/enterprise'
  import { getThirdCategoryTree } from '@/api/goods/thirdCategory'

  export default {
    components: {
      draggable, GoodsCategory
    },
    directives: {
      elDragDialog
    },
    props: {
      dict: { type: Object },
      fromListPage: { type: Number, default: 30 },
      showEditButton: { type: Boolean, default: true }
    },
    data() {
      return {
        curIndex: -1,
        curHover: -1,
        token: '',
        // 选品小程序
        checkSelectionGoods: true,
        // 小程序直播
        checkShopApp: true,
        checkedTikTok: false,
        checkedQuick: false,
        checkedPinDuoDuo: false,
        checkedTaobao: false,
        // 云店小程序
        checkedStoreApp: true,
        listBrands: [],
        form: {
          skuFlag: '0',
          sortNo: 0,
          title: '', // 标题
          goodsCode: '', // 商品货号
          goodsBarCode: '', // 商品条形码
          externalCode: '', // 商品条形码
          posterTitle: '', // 海报商品名称
          posterRecommend: '', // 海报商品推荐语
          sellPoint: '', // 商品卖点
          shareCopy: '',
          unit: '件', // 单位
          goodsType: '30', // 商品类型 30: 实物商品, 2: 批发商品
          goodsImages: [],
          labelTypes: [], // 1: 推荐, 2: 热门,3: 新品4: 包邮
          shareImageUrl: '',
          picUrl: '',
          posterImageUrl: '',
          // 商品分类
          goodscategoryIds: [],
          // 批发商品分类
          wholesaleGoodscategoryIds: [],
          kuaiShouCategoryCopyIds: [],
          // 加入选品库
          selectionGoodsType: 1,
          // 加入云店
          storeAppGoodsType: 1,
          // 小程序直播
          anchorPlatformShopType: 1,
          taobaoAuthority: 1,
          pinDuoDuoAuthority: 1,
          // 抖音小店和快手小店权限
          tiktokAuthority: 0,
          quickAuthority: 0,
          // 抖店商品链接
          tiktokGoodsUrl: '',
          // 快手商品链接
          quickGoodsUrl: '',
          // 淘宝商品链接
          taobaoGoodsUrl: '',
          // 拼多多商品链接
          pinDuoDuoGoodsUrl: ''
        },
        // 系统参数
        enterpriseConfig: {
          categorySeparate: '0',
          wholesaleCategoryAlias: '0',
          // 主播选品
          anchorSelectionAuthority: 1,
          // 平台对接
          platformAuthority: 1
        },
        categoryId: '',
        comDict: {},
        enterpriseId: this.getEnterpriseId(),
        fileLoading: false,
        shareFileLoading: false,
        picFileLoading: false,
        posterFileLoading: false,
        // 商品的所有分类json
        categoryData: [],
        // 批发商品类目
        wholesaleCategoryData: [],
        kuaiShouCategoryData: [],
        checked: {},
        dialogCategoryTreeVisible: false,
        rules: {
          sortNo: [
            { pattern: /^[0-9]*[0-9][0-9]*$/, message: '请填写正确排序' }
          ],
          title: [
            { max: 100, message: '商品名称最多输入 100 个字符' },
            { required: true, message: '请填写商品名称', trigger: 'blur' }
          ],
          posterTitle: [
            { max: 100, message: '海报商品名称最多输入 100 个字符' }
          ],
          posterRecommend: [
            { max: 20, message: '海报商品推荐语最多输入 20 个字符' }
          ],
          sellPoint: [
            { max: 50, message: '商品卖点最多输入 50 个字符' }
          ],
          shareCopy: [
            { max: 150, message: '分享文案最多输入 150 个字符' }
          ],
          unit: [
            { max: 6, message: '单位最多输入 6 个字符' },
            { required: true, message: '请填写单位', trigger: 'blur' }
          ],
          goodscategoryIds: [
            { required: true, message: '请填写商品分类', trigger: 'blur' }
          ],
          wholesaleGoodscategoryIds: [
            { required: true, message: '请填写商品分类', trigger: 'blur' }
          ]
        }
      }
    },
    // 初始化页面
    created() {
      this.token = { accessToken: getToken() }
      this.initEnterpriseConfig()
      this.listBrand()
      this.listGoodsCategory()
      this.listWholesaleGoodsCategory()
      this.listKuaiShouCategory()
      this.initGoodsEdit()
      this.initDictCommon()
    },
    methods: {
      closeEls(item) {
        if (item === 'picUrl') {
          this.form.picUrl = ''
        }
        if (item === 'shareImageUrl') {
          this.form.shareImageUrl = ''
        }
        if (item === 'posterImageUrl') {
          this.form.posterImageUrl = ''
        }
      },
      changeAuthority() {
        // 小程序直播
        if (this.checkShopApp) {
          this.form.anchorPlatformShopType = '1'
        } else {
          this.form.anchorPlatformShopType = '0'
        }
        // 抖音小店
        if (this.checkedTikTok) {
          this.form.tiktokAuthority = '1'
        } else {
          this.form.tiktokAuthority = '0'
        }
        // 快手小店
        if (this.checkedQuick) {
          this.form.quickAuthority = '1'
        } else {
          this.form.quickAuthority = '0'
        }
        // 拼多多小店
        if (this.checkedPinDuoDuo) {
          this.form.pinDuoDuoAuthority = '1'
        } else {
          this.form.pinDuoDuoAuthority = '0'
        }
        // 淘宝小店
        if (this.checkedTaobao) {
          this.form.taobaoAuthority = '1'
        } else {
          this.form.taobaoAuthority = '0'
        }
        // 选品小程序
        if (this.checkSelectionGoods) {
          this.form.selectionGoodsType = '1'
        } else {
          this.form.selectionGoodsType = '0'
        }
        // 云店小程序
        if (this.checkedStoreApp) {
          this.form.storeAppGoodsType = '1'
        } else {
          this.form.storeAppGoodsType = '0'
        }
      },
      initGoodsEdit() {
        const that = this
        this.$bus.$on('goods.edit.data', function(data) {
          that.form.skuFlag = that.$utils.isExist(data.skuFlag) ? data.skuFlag : '0'
          that.form.sortNo = that.$utils.isExist(data.sortNo) ? data.sortNo : '0'
          that.form.title = that.$utils.isExist(data.title) ? data.title : ''
          that.form.goodsCode = that.$utils.isExist(data.goodsCode) ? data.goodsCode : ''
          that.form.goodsBarCode = that.$utils.isExist(data.goodsBarCode) ? data.goodsBarCode : ''
          that.form.externalCode = that.$utils.isExist(data.externalCode) ? data.externalCode : ''
          that.form.posterTitle = that.$utils.isExist(data.posterTitle) ? data.posterTitle : ''
          that.form.posterRecommend = that.$utils.isExist(data.posterRecommend) ? data.posterRecommend : ''
          that.form.sellPoint = that.$utils.isExist(data.sellPoint) ? data.sellPoint : ''
          that.form.shareCopy = that.$utils.isExist(data.shareCopy) ? data.shareCopy : ''
          that.form.unit = that.$utils.isExist(data.unit) ? data.unit : ''
          that.$set(that.form, 'brandId', that.$utils.isExist(data.brandId) ? data.brandId + '' : '')
          that.form.goodsType = that.$utils.isExist(data.goodsType) ? data.goodsType + '' : this.fromListPage
          that.form.shareImageUrl = that.$utils.isExist(data.shareImageUrl) ? data.shareImageUrl + '' : ''
          that.form.picUrl = that.$utils.isExist(data.picUrl) ? data.picUrl + '' : ''
          that.form.posterImageUrl = that.$utils.isExist(data.posterImageUrl) ? data.posterImageUrl + '' : ''
          that.form.goodsImages = that.$utils.isExist(data.goodsImages) ? data.goodsImages : ''
          that.form.labelTypes = that.$utils.isExist(data.labelTypes) ? data.labelTypes : []
          that.form.selectionGoodsType = that.$utils.isExist(data.selectionGoodsType) ? data.selectionGoodsType + '' : '0'
          that.form.storeAppGoodsType = that.$utils.isExist(data.storeAppGoodsType) ? data.storeAppGoodsType + '' : '0'
          that.form.tiktokAuthority = that.$utils.isExist(data.tiktokAuthority) ? data.tiktokAuthority + '' : '0'
          that.form.quickAuthority = that.$utils.isExist(data.quickAuthority) ? data.quickAuthority + '' : '0'
          that.form.pinDuoDuoAuthority = that.$utils.isExist(data.pinDuoDuoAuthority) ? data.pinDuoDuoAuthority + '' : '0'
          that.form.taobaoAuthority = that.$utils.isExist(data.taobaoAuthority) ? data.taobaoAuthority + '' : '0'
          that.form.anchorPlatformShopType = that.$utils.isExist(data.anchorPlatformShopType) ? data.anchorPlatformShopType + '' : '1'
          that.form.tiktokGoodsUrl = that.$utils.isExist(data.tiktokGoodsUrl) ? data.tiktokGoodsUrl : ''
          that.form.quickGoodsUrl = that.$utils.isExist(data.quickGoodsUrl) ? data.quickGoodsUrl : ''
          that.form.taobaoGoodsUrl = that.$utils.isExist(data.taobaoGoodsUrl) ? data.taobaoGoodsUrl : ''
          that.form.pinDuoDuoGoodsUrl = that.$utils.isExist(data.pinDuoDuoGoodsUrl) ? data.pinDuoDuoGoodsUrl : ''
          // 云店小程序
          if (that.form.storeAppGoodsType === '0') {
            that.checkedStoreApp = false
          } else {
            that.checkedStoreApp = true
          }
          // 选品库开关
          if (that.form.selectionGoodsType === '0') {
            that.checkSelectionGoods = false
          } else {
            that.checkSelectionGoods = true
          }
          // 小程序直播
          if (that.form.anchorPlatformShopType === '0') {
            that.checkShopApp = false
          } else {
            that.checkShopApp = true
          }
          // 抖音小店
          if (that.form.tiktokAuthority === '0') {
            that.checkedTikTok = false
          } else {
            that.checkedTikTok = true
          }
          // 快手小店
          if (that.form.quickAuthority === '0') {
            that.checkedQuick = false
          } else {
            that.checkedQuick = true
          }
          // 拼多多小店
          if (that.form.pinDuoDuoAuthority === '0') {
            that.checkedPinDuoDuo = false
          } else {
            that.checkedPinDuoDuo = true
          }
          // 淘宝小店
          if (that.form.taobaoAuthority === '0') {
            that.checkedTaobao = false
          } else {
            that.checkedTaobao = true
          }
          const oneCategoryId = that.$utils.isExist(data.oneCategoryId) ? data.oneCategoryId : ''
          const twoCategoryId = that.$utils.isExist(data.twoCategoryId) ? data.twoCategoryId : ''
          const threeCategoryId = that.$utils.isExist(data.threeCategoryId) ? data.threeCategoryId : ''
          const wholesaleOneCategoryId = that.$utils.isExist(data.wholesaleOneCategoryId) ? data.wholesaleOneCategoryId : ''
          const wholesaleTwoCategoryId = that.$utils.isExist(data.wholesaleTwoCategoryId) ? data.wholesaleTwoCategoryId : ''
          const wholesaleThreeCategoryId = that.$utils.isExist(data.wholesaleThreeCategoryId) ? data.wholesaleThreeCategoryId : ''
          var arr = [] // 创建一个空数组 零售商品类目
          var wholesaleArr = [] // 批发商品类目数组
          if (that.$utils.isExist(oneCategoryId)) {
            arr.push(oneCategoryId)
          }
          if (that.$utils.isExist(twoCategoryId)) {
            arr.push(twoCategoryId)
          }
          if (that.$utils.isExist(threeCategoryId)) {
            arr.push(threeCategoryId)
          }
          // 批发类目
          if (that.$utils.isExist(wholesaleOneCategoryId)) {
            wholesaleArr.push(wholesaleOneCategoryId)
          }
          if (that.$utils.isExist(wholesaleTwoCategoryId)) {
            wholesaleArr.push(wholesaleTwoCategoryId)
          }
          if (that.$utils.isExist(wholesaleThreeCategoryId)) {
            wholesaleArr.push(wholesaleThreeCategoryId)
          }
          that.form.goodscategoryIds = arr
          that.form.wholesaleGoodscategoryIds = wholesaleArr
        })
      },
      initDictCommon() {
        getDictCommon().then(response => {
          this.comDict = response.data
        })
      },
      categoryChange() {
        this.categoryId = this.form.goodscategoryIds[this.form.goodscategoryIds.length - 1]
        this.$bus.$emit('goods.edit.categoryId', this.categoryId)
        this.wholesaleCategoryId = this.form.wholesaleGoodscategoryIds[this.form.wholesaleGoodscategoryIds.length - 1]
        this.$bus.$emit('goods.edit.wholesaleCategoryId', this.wholesaleCategoryId)
        if (this.form.kuaiShouCategoryCopyIds !== undefined) {
          this.kuaiShouCategoryId = this.form.kuaiShouCategoryCopyIds[this.form.kuaiShouCategoryCopyIds.length - 1]
          this.$bus.$emit('goods.edit.kuaiShouCategoryId', this.kuaiShouCategoryId)
        }
      },
      // 展示3级任务类型
      showSubCategory(key) {
        this.picData[key].show = true
        const changeData = this.picData[key].show
        this.$delete(this.picData[key], 'show')
        this.$set(this.picData[key], 'show', changeData)
      },
      // 隐藏3级任务类型
      hideSubCategory(key) {
        this.picData[key].show = false
      },
      goodsMouseEnter(key) {
        this.form.goodsImages[key].show = true
        const changeData = this.form.goodsImages[key].show
        this.$delete(this.form.goodsImages[key], 'show')
        this.$set(this.form.goodsImages[key], 'show', changeData)
      },
      goodsMouseLeave(key) {
        this.form.goodsImages[key].show = false
      },
      // 删除图片
      deleteImgages(item, key) {
        const goodsImages = this.form.goodsImages
        goodsImages.splice(key, 1)
        this.form.goodsImages = goodsImages
        this.setMainImageFlag()
      },
      // 修改图片
      changeImgages(item, key) {
        const goodsImages = this.form.goodsImages
        const arry = this.swapArray(goodsImages, key, 0)
        this.form.goodsImages = arry
        this.setMainImageFlag()
      },
      // 设置主图
      setMainImageFlag() {
        const goodsImages = this.form.goodsImages
        goodsImages.forEach((item, index) => {
          if (index === 0) {
            item.mainImageFlag = 1
          } else {
            item.mainImageFlag = 0
          }
        })
        this.form.goodsImages = goodsImages
      },
      swapArray(arr, index1, index2) {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0]
        return arr
      },
      // 获取类目
      listGoodsCategory() {
        const enterpriseId = this.enterpriseId
        listGoodsCategory(enterpriseId).then(response => {
          this.categoryData = response.data
        })
      },
      // 获取批发商品类目
      listWholesaleGoodsCategory() {
        const enterpriseId = this.enterpriseId
        listWholesaleGoodsCategory(enterpriseId).then(response => {
          this.wholesaleCategoryData = response.data
        })
      },
      // 快手商品分类Tree
      listKuaiShouCategory() {
        getThirdCategoryTree('2').then(response => {
          if (response.isError) return
          this.kuaiShouCategoryData = response.data
        })
      },
      listBrand() {
        listBrand(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.listBrands = response.data
        })
      },
      checkForm() {
        const goodscategoryIds = this.form.goodscategoryIds
        const wholesaleGoodscategoryIds = this.form.wholesaleGoodscategoryIds
        // 需要校验的集合
        const checkArrays = []
        checkArrays.push('sortNo')
        checkArrays.push('title')
        checkArrays.push('goodscategoryIds')
        checkArrays.push('wholesaleGoodscategoryIds')
        if (this.fromListPage === 30) {
          checkArrays.push('posterTitle')
          checkArrays.push('posterRecommend')
        }
        checkArrays.push('sellPoint')
        checkArrays.push('shareCopy')
        let ret = true
        this.$refs.form.validateField(checkArrays, (valid) => {
          if (valid !== '') {
            this.$message.error(valid)
            ret = false
            return
          }
        })

        if (!ret) {
          return false
        }

        if (!this.form.unit) {
          this.$message({
            type: 'warning',
            message: '商品单位不能为空'
          })
          return false
        }

        if (goodscategoryIds.length === 0 && wholesaleGoodscategoryIds.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择商品类目!'
          })
          return false
        }
        if (this.form.sellPoint !== '' && this.form.sellPoint.length > 50) {
          this.$message({
            type: 'warning',
            message: '商品卖点不能超过50个字!'
          })
          return false
        }
        if (this.form.shareCopy !== '' && this.form.shareCopy.length > 150) {
          this.$message({
            type: 'warning',
            message: '商品卖点不能超过150个字!'
          })
          return false
        }
        return true
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fileLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      // 文件超出个数限制时的钩子
      handleExceed(file, fileList) {
        this.$message.warning('最多只能上传5张主图')
      },
      handleUploadSuccess(res, file) {
        if (this.form.goodsImages.length > 5) {
          this.$message({
            type: 'error',
            message: '最多只能上传5张主图'
          })
          return false
        }
        this.fileLoading = false
        if (res.code === 101) {
          const imageUrl = res.data[0]
          const goodsImages = this.form.goodsImages
          var obj = {
            imageUrl: imageUrl,
            mainImageFlag: 0
          }
          goodsImages.push(obj)
          this.form.goodsImages = goodsImages
          this.setMainImageFlag()
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      beforeShareImageUrlUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.shareFileLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      beforePicUrlUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.picFileLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadShareImageUrlSuccess(res, file) {
        this.shareFileLoading = false
        if (res.code === 101) {
          const imageUrl = res.data[0]
          this.form.shareImageUrl = imageUrl
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      handleUploadPicUrlSuccess(res, file) {
        this.picFileLoading = false
        if (res.code === 101) {
          const imageUrl = res.data[0]
          this.form.picUrl = imageUrl
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      beforePosterImageUrlUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.posterFileLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadPosterImageUrlSuccess(res, file) {
        this.posterFileLoading = false
        if (res.code === 101) {
          this.form.posterImageUrl = res.data[0]
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.form.goodsImages
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
        }
        this.form.goodsImages = filters
      },
      itemOver(index) {
        this.curHover = index
      },
      refreshCategory() {
        this.listGoodsCategory()
        this.$message({ message: '刷新成功', type: 'success' })
        this.dialogCategoryTreeVisible = false
      },
      itemOut(index) {
        this.curHover = index
      },
      // 获取系统参数
      initEnterpriseConfig() {
        getByEnterpriseId(this.enterpriseId).then((response) => {
          if (response.isError) return
          this.enterpriseConfig = response.data
          this.$bus.$emit('info.enterpriseConfig', response.data)
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .pro-p-minheight{
    min-height: 148px;
  }
  .noraml-hide{
    display: none!important;
  }
  .active{
    display: block!important;
  }
  .span-bar{
    padding: 0 50px;
  }
  .remove-btn{
    padding: 7px 6px!important;
  }
  .long-input{
    width: 80%;
  }
  .long-input-2{
    min-width: 55%;
    // margin-right: 10px;
  }
  .long-input-3{
    width: 55%;
  }
  .short-input{
    width: 20%;
  }
  .short-input-2{
    width: 25%;
  }
  .default-input{
    width: 50%;
  }
  .tips{
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }
  .picture{
    width: 148px;
    height: 148px;
    display: block;
  }
  .pic-bar{
    position: relative;
    display: inline-block;
    .close-icon{
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }
    span{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0,0,0,0.5);
      cursor: pointer;
    }
  }
  .pic-add{
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }
  .el-dialog-div{
    height: 70vh;
    overflow: auto;
  }
</style>
